<template>
    <div class="file-preview-container">
      <div v-for="(file) in files" :key="file.id" class="file-item">
        <!-- 图片预览 -->
        <div v-if="isImage(file.type)" class="image-preview">
          <img 
            :src="file.url" 
            alt="Preview" 
            class="thumbnail"
            @click="openLightbox(file.url)"
          />
          <span class="file-type-tag">Image</span>
        </div>
  
        <!-- 音频预览 -->
        <div v-else-if="isAudio(file.type)" class="audio-preview">
          <audio controls>
            <source :src="file.url" :type="`audio/${file.type}`">
            Your browser does not support the audio element.
          </audio>
        </div>
  
        <!-- 视频预览 -->
        <div v-else-if="isVideo(file.type)" class="video-preview">
          <video controls width="250">
            <source :src="file.url" :type="`video/${file.type}`">
            Your browser does not support videos.
          </video>
        </div>
  
        <!-- 通用文件预览 -->
        <div v-else class="generic-file">
          <div class="file-icon">
            <span class="icon">📄</span>
            <span class="file-type">{{ file.type }}</span>
          </div>
          <a 
            :href="file.url" 
            target="_blank" 
            class="download-link"
            rel="noopener noreferrer"
          >
            Download File
          </a>
        </div>
      </div>
  
      <!-- 图片灯箱 -->
      <div v-if="lightboxVisible" class="lightbox" @click="closeLightbox">
        <img :src="selectedImage" class="lightbox-image" />
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import { MessageFile } from '@/types/dify';
  
  @Component
  export default class FilePreview extends Vue {

    @Prop({ required: true }) files!: MessageFile[];
    
    lightboxVisible = false;
    selectedImage = '';
  
    isImage(type: string): boolean {
      return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(type.toLowerCase());
    }
  
    isAudio(type: string): boolean {
      return ['mp3', 'wav', 'ogg', 'm4a'].includes(type.toLowerCase());
    }
  
    isVideo(type: string): boolean {
      return ['mp4', 'webm', 'mov'].includes(type.toLowerCase());
    }
  
    openLightbox(url: string) {
      this.selectedImage = url;
      this.lightboxVisible = true;
      document.body.style.overflow = 'hidden';
    }
  
    closeLightbox() {
      this.lightboxVisible = false;
      document.body.style.overflow = '';
    }
  }
  </script>
  
  <style scoped>
  .file-preview-container {
    margin-top: 8px;
  }
  
  .thumbnail {
    max-width: 200px;
    max-height: 150px;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform 0.2s;
  }
  
  .thumbnail:hover {
    transform: scale(1.05);
  }
  
  .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
  }
  
  .file-type-tag {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 4px;
  }
  
  .generic-file {
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .download-link {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9em;
  }
  
  .download-link:hover {
    text-decoration: underline;
  }
  </style>